<template>
  <div>
    <br/><br/><br/><br/>
    <div v-if="this.flowerInfo.flowerId==null" style="width: 1240px">
      <el-empty description="该商品已下架" :image-size="500">
      </el-empty>
    </div>

    <div v-else>
      <!--上半部分-->
      <div style="width: 600px;height: 700px;float: left">
        <span style="font-size: 20px;color: red;">商品详情</span>
        <div class="demo-image" style="margin-top: 20px">
          <div class="block">
            <el-image style="width: 600px; height: 600px"
                      :src="'http://localhost:8088/image'+this.flowerInfo.flowerImg">
            </el-image>
            <p>
              <span style="opacity: 0.5;">温馨提示：以上图片仅供参考，若图片与实物有所不同，则以实物为准。</span>
            </p>
          </div>
        </div>
      </div>
      <div style="float: left;width: 620px;height: 626px;margin-left: 58px;margin-top: 35px">
        <div style="margin-left: 80px;margin-top: 30px">
          <p>
            <span style="font-size: 25px">商品名称：</span>
            &nbsp;&nbsp;&nbsp;
            <span style="font-size: 30px">{{ flowerInfo.flowerName }}</span>
          </p>
          <p style="margin-top: 20px">
            <span style="font-size: 25px">售价：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 50px;color: red">￥{{ flowerInfo.flowerPrice }}</span>
          </p>
          <p>
            <span style="font-size: 25px">销量：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 20px;">
              已售出
              <span style="color: lightpink;font-size: 25px">{{ flowerInfo.flowerSaleCount }}</span>
              件
            </span>
          </p>
          <p style="margin-top: 5px">
            <span style="font-size: 25px">品种：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 25px;">
             {{ flowerInfo.typeName }}
            </span>
          </p>
          <p style="margin-top: 30px">
            <span style="font-size: 20px">上架日期：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 20px">{{ flowerInfo.publisherDate }}</span>
          </p>
          <div style="margin-top: 40px">
            <p style="float: left;font-size: 20px;margin-top: 4px"><span>购买数量：</span></p>
            <div style="margin-left: 30px;float: left">
              <el-input-number v-model="buyCount" size="medium"
                               @change="changeBuyCount" :min="1">
              </el-input-number>
            </div>
          </div>
          <br/><br/>
          <p style="margin-top: 20px">
            <span style="font-size: 20px">总计：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 25px">{{ totalPrice }}元</span>
          </p>
          <p style="margin-top: 50px">
            <span>附送：</span>
            <span>下单填写留言，即免费赠送精美贺卡！</span>
          </p>
          <p style="margin-top: 20px">
            <span>配送范围：</span>
            <span>全国（可配送至全国1000多个城市，市区内免配送费）</span>
          </p>
          <div style="margin-top: 30px">
            <div style="float: left">
              <el-button type="danger" plain style="width: 180px;height: 60px;" @click="insertCartByAccountId">
                加入购物车
              </el-button>
              <el-button type="danger" style="width: 180px;height: 60px;margin-left: 30px;" @click="insertFlowerOrder">
                立即购买
              </el-button>
            </div>
            <div role="button" style="margin-left: 450px" v-if="this.isCollect==1" @click="changeIsCollect">
              <i class="el-icon-star-on" style="margin-left: 15px;margin-top: 8px"/>
              <p>已收藏</p>
            </div>
            <div role="button" style="margin-left: 460px;" v-else @click="changeIsCollect">
              <i class="el-icon-star-off" style="margin-left: 8px;margin-top: 8px"/>
              <p>收藏</p>
            </div>
          </div>
        </div>
      </div>
      <!--下半部分-->
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <el-divider></el-divider>
      <br/>
      <div style="float:left;background-color:rgba(255,182,193,0.1);width: 250px;height: 900px;">
        <p style="font-size: 20px;color: #546570;margin-left: 25px;margin-top: 10px;">
          <span><strong>热销推荐</strong></span>
        </p>
        <div class="block" style="margin-top: 20px" align="center" role="button">
          <a @click="toSale(flowerSaleList[0].flowerId)">
            <el-image style="width: 200px;height: 200px;border-radius: 10px"
                      :src="'http://localhost:8088/image'+this.flowerSaleList[0].flowerImg">
            </el-image>
          </a>
          <p style="margin-top: 5px;font-size: 20px">
            <span>{{ this.flowerSaleList[0].flowerName }}</span>
          </p>
          <p style="font-size: 20px">
            <span>￥{{ this.flowerSaleList[0].flowerPrice }}</span>
          </p>
        </div>
        <div class="block" style="margin-top: 20px" align="center" role="button">
          <a @click="toSale(flowerSaleList[1].flowerId)">
            <el-image style="width: 200px;height: 200px;border-radius: 10px"
                      :src="'http://localhost:8088/image'+this.flowerSaleList[1].flowerImg">
            </el-image>
          </a>
          <p style="margin-top: 5px;font-size: 20px">
            <span>{{ this.flowerSaleList[1].flowerName }}</span>
          </p>
          <p style="font-size: 20px">
            <span>￥{{ this.flowerSaleList[1].flowerPrice }}</span>
          </p>
        </div>
        <div class="block" style="margin-top: 20px" align="center" role="button">
          <a @click="toSale(flowerSaleList[2].flowerId)">
            <el-image style="width: 200px;height: 200px;border-radius: 10px"
                      :src="'http://localhost:8088/image'+this.flowerSaleList[2].flowerImg">
            </el-image>
          </a>
          <p style="margin-top: 5px;font-size: 20px">
            <span>{{ this.flowerSaleList[2].flowerName }}</span>
          </p>
          <p style="font-size: 20px">
            <span>￥{{ this.flowerSaleList[2].flowerPrice }}</span>
          </p>
        </div>
      </div>

      <div style="float: left;margin-left: 50px;width: 978px;" align="center">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="商品详情" name="first">
            <br/><br/><br/>
            <el-image :src="'http://localhost:8088/image'+this.flowerInfo.introduction">
            </el-image>
            <br/><br/><br/>
          </el-tab-pane>
          <el-tab-pane label="评论" name="second">
            评论--根据时间倒叙
            <div class="comment-list">
              <el-table
                  :data="comments"
                  style="width: 100%"
                  max-height="770"
                  sortable>
                <el-table-column
                    prop="content"
                    label="评价内容"
                    width="300">
                </el-table-column>
                <el-table-column prop="commentImg" label="评论图片" width="280">
                  <template slot-scope="scope">
                    <el-image :src="'http://localhost:8088/image/Test/' + scope.row.commentImg" class="custom-image"/>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="rateScore"
                    label="评分"
                    width="150">
                  <template slot-scope="scope">
                    <el-rate disabled :value="scope.row.rateScore"
                             :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A', '#F7BA2A', '#F7BA2A']"/>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "FlowerInfoView",
  data() {
    return {
      accountId: "2",
      accountName: "jack",

      flowerInfo: {},
      buyCount: 0,
      totalPrice: 0,
      isCollect: "",

      flowerSaleList: [],
      // 默认展示商品详情
      activeName: 'first',

      comments: [],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示条数
      total: 0 // 总数据条数
    }
  },
  created() {
    this.getLogin();
    this.selectFlowerInfoByFlowerId();
    this.checkIsCollect();
    this.selectFlowerBySale();

    this.getCommentsByPageAndFlowerId();
    this.getCommentsByFlowerId();
  },
  methods: {
    getCommentsByPageAndFlowerId() {
      const formData = {
        accountId: sessionStorage.getItem("accountId"),
        flowerId: sessionStorage.getItem("flowerId"),
        pageNum: this.currentPage,  // 发送当前页码
        pageSize: this.pageSize  // 发送每页条数
      }
      this.$axios.post("/evaluate/getCommentsByPageAndFlowerId", formData)
          .then(response => {
            this.comments = response.data;
          })
          .catch(error => {
            console.error('获取评价数据出错:', error);
          });
    },
    getCommentsByFlowerId() {
      const formData = {
        accountId: sessionStorage.getItem("accountId"),
        flowerId: sessionStorage.getItem("flowerId"),
      }
      this.$axios.post("/evaluate/getCommentsByFlowerId", formData)
          .then(response => {
            this.total = response.data.length;
          })
          .catch(error => {
            console.error('获取评价数据出错:', error);
          });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCommentsByPageAndFlowerId();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCommentsByPageAndFlowerId();
    },
    // 得到登录信息
    getLogin() {
      this.accountId = sessionStorage.getItem("accountId");
      this.accountName = sessionStorage.getItem("accountName");
    },
    // 得到当前商品信息
    selectFlowerInfoByFlowerId() {
      let flowerId = sessionStorage.getItem("flowerId");
      this.$axios.get("/flowerInfo/selectFlowerInfoByFlowerId", {
        params: {
          flowerId: flowerId,
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.flowerInfo = res.data.data;
          this.totalPrice = res.data.data.flowerPrice;
        }
      })
    },
    // 核查收藏情况
    checkIsCollect() {
      let flowerId = sessionStorage.getItem("flowerId");
      this.$axios.get("/flowerCollection/checkIsCollect", {
        params: {
          accountId: this.accountId,
          flowerId: flowerId,
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.isCollect = 1;
        } else {
          this.isCollect = 0;
        }
      })
    },
    // 热销推荐
    selectFlowerBySale() {
      this.$axios.get("/flowerInfo/selectFlowerBySale")
          .then(res => {
            if (res.data.code == 200) {
              this.flowerSaleList = res.data.data;
            }
          })
    },
    // 改变购买数量
    changeBuyCount(value) {
      this.buyCount = value;
      this.totalPrice = this.flowerInfo.flowerPrice * this.buyCount;
      console.log(this.totalPrice);
    },
    // 改变收藏状态
    changeIsCollect() {
      if (this.isCollect == 0) {
        let params = new URLSearchParams;
        params.append("accountId", this.accountId);
        params.append("flowerId", this.flowerInfo.flowerId);
        this.$axios.post("/flowerCollection/insertCollection", params)
            .then(res => {
              if (res.data.code == 200) {
                Message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1500
                })
              } else {
                Message({
                  message: res.data.msg,
                  type: "error",
                  duration: 1500
                })
              }
            });
        this.isCollect = 1;
        return;
      }
      if (this.isCollect == 1) {
        let params = new URLSearchParams;
        params.append("accountId", this.accountId);
        params.append("flowerId", this.flowerInfo.flowerId);
        this.$axios.post("/flowerCollection/deleteCollection", params)
            .then(res => {
              if (res.data.code == 200) {
                Message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1500
                })
              } else {
                Message({
                  message: res.data.msg,
                  type: "error",
                  duration: 1500
                })
              }
            })
        this.isCollect = 0;
      }
    },
    // 添加商品至购物车
    insertCartByAccountId() {
      let params = new URLSearchParams;
      params.append("accountId", this.accountId);
      params.append("flowerId", this.flowerInfo.flowerId);
      params.append("buyCount", this.buyCount);
      this.$axios.post("/flowerCart/insertCartByAccountId", params)
          .then(res => {
            if (res.data.code == 200) {
              Message({
                message: res.data.msg,
                type: "success",
                duration: 1000
              });
              window.location.reload();
            } else {
              Message({
                message: res.data.msg,
                type: "error",
                duration: 1000
              })
            }
          })
    },
    // 跳转热销商品页面
    toSale(flowerId) {
      sessionStorage.setItem("flowerId", flowerId)
      if (this.$route.path !== '/flower') {
        this.$router.push('/flower');
      } else {
        window.location.reload();
      }
    },
    // 直接下单
    insertFlowerOrder() {
      let params = new URLSearchParams;
      params.append("accountId", this.accountId);
      params.append("buyCount", this.buyCount);
      params.append("flowerId",this.flowerInfo.flowerId);
      params.append("flowerPrice",this.flowerInfo.flowerPrice)
      this.$axios.post("/flowerOrder/insertFlowerOrderFromFlowerInfo", params)
          .then(res => {
            if (res.data.code == 200) {
              Message({
                message: res.data.msg,
                type: "success",
                duration: 1000
              });
              sessionStorage.setItem("orderId", res.data.data);
              this.$router.push('/checkOut');
            } else if(res.data.code==300){
              Message({
                message: res.data.msg,
                type: "error",
                duration: 1000
              })
              this.$router.push('/site');
            }else {
              Message({
                message: res.data.msg,
                type: "error",
                duration: 1000
              })
            }
          })
    },
  }
}
</script>

<style>
div[role="button"] {
  cursor: pointer;
}

/* 可以添加到样式表中 */
div[role="button"]:hover {
  transform: scale(1.05); /* 轻微放大效果 */
}
</style>